<template>
  <div class="screen-wrapper">
    <div class="screen" id="screen">
      <div class="demo-root">
        <!-- 顶部 -->
        <header>
          <HeaderBar></HeaderBar>
        </header>
        <!-- 主体 -->
        <main>
          <div class="demo-left">
            <LeftBar></LeftBar>
          </div>
          <div class="demo-center">
            <MapBar></MapBar>
          </div>
          <div class="demo-right">
            <RightBar></RightBar>
          </div>
        </main>
        <!-- 顶部 -->
        <FooterBar></FooterBar>
      </div>
    </div>
  </div>
</template>

<script>
// 头部
import HeaderBar from "@/components/mainPart/HeaderBar.vue";
// 左侧
import LeftBar from "@/components/mainPart/LeftBar.vue";
// 地图
import MapBar from "@/components/mainPart/MapBar.vue";
// 右侧
import RightBar from "@/components/mainPart/RightBar.vue";
// 底部
import FooterBar from "@/components/mainPart/FooterBar.vue";

import axios from '@/api/Interceptor.js'

export default {
  name: "Main",
  data() {
    return {};
  },

  components: { HeaderBar, LeftBar, MapBar, RightBar, FooterBar },

  mounted() {
    // 初始化自适应  ----在刚显示的时候就开始适配一次
    this.handleScreenAuto();
    //绑定自适应函数   ---防止浏览器栏变化后不再适配
    window.onresize = () => this.handleScreenAuto();

    // this.data_init()
  },
  destroyed() {
    window.onresize = null
  },

  methods: {
    //数据大屏自适应函数
    handleScreenAuto() {
      const designDraftWidth = 1536; //设计稿的宽度
      const designDraftHeight = 754; //设计稿的高度
      //根据屏幕的变化适配的比例
      const scale =
        document.documentElement.clientWidth /
          document.documentElement.clientHeight <
          designDraftWidth / designDraftHeight
          ? document.documentElement.clientWidth / designDraftWidth
          : document.documentElement.clientHeight / designDraftHeight;
      //缩放比例
      document.querySelector(
        "#screen"
      ).style.transform = `scale(${scale}) translate(-50%)`;
    },

    async data_init() {
      let data = await axios.get('/home/swiper')
      console.log(data);
    }

 },

};
</script>

<style lang="scss"  scoped>
.screen-wrapper {
  .screen {
    display: inline-block;
    // width: 2004px;  //设计稿的宽度
    // height: 974px;  //设计稿的高度
    width: 1536px; //设计稿的宽度
    height: 744px; //设计稿的高度
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    background: no-repeat center;
    background-image: url('~@/assets/images/5CqViYyO5_1600772425766_tPo4xBlp2d.jpg');
    background-size: 100% 100%;
  }

  // 内容
  main {
    padding: 0 10px;
    display: flex;

    // 左侧
    .demo-left {
      width: 350px;
    }
  }
}
</style>
